<template>
	<view>
		<view class="img_bg">
			<image :src="imgurl" mode="heightFix"></image>
		</view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
			<view class="form">
				<view class="form_title">
					{{topicList.title}}
				</view>
				<view class="form_content" v-if="topicList.content !== null">
					{{topicList.content}}
				</view>

				<view v-for="(item,index) in topicList.design" class="form_desgin">

					<view class="form_topic">
						<view v-if="item.required" style="color: red;">*</view>
						<view style="margin-left: 10upx;">
							{{index+1}}. {{item.title}}{{item.type==2?'(可多选)':''}}
						</view>
					</view>


					<view class="form_module" v-if="item.type == 1">
						<u-radio-group :wrap="true">
							<u-radio v-for="(itemG, indexG) in item.options" :key="indexG" :name="itemG.value"
								@change="radioChange(item,itemG,indexG)">
								{{itemG.value}}
							</u-radio>
						</u-radio-group>
					</view>

					<view class="form_module" v-if="item.type == 2" v-for="(itemC, indexC) in item.options"
						:key="indexC">
						<u-checkbox-group :wrap="true">
							<u-checkbox v-model="itemC.disabled" :name="itemC.value">{{itemC.value}}</u-checkbox>
						</u-checkbox-group>
					</view>

					<view class="form_module" v-else-if="item.type == 3">
						<u-input v-model="topicList.design[index].options[0].value" type="text" :border="true"
							:clearable="false" />
					</view>
					<view class="form_module" v-else-if="item.type == 4">
						<u-input v-model="topicList.design[index].options[0].value" type="textarea" :border="true"
							:height="100" :auto-height="true" :clearable="false" />
					</view>
				</view>

				<view class="form_submit">
					<view class="submit" @click="submit">确认提交</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 模拟问卷数据
				topicList: {
					title: '模拟问卷',
					content: '模拟问卷解释',
					design: [{
							id: 1,
							required: false,
							title: "模拟题目1",
							type: 1,
							options: [{
									value: '模拟答案1',
									disabled: false
								},
								{
									value: '模拟答案2',
									disabled: false
								},
								{
									value: '模拟答案3',
									disabled: false
								}
							]
						},
						{
							id: 2,
							required: true,
							title: "模拟题目2",
							type: 1,
							options: [{
									value: '模拟答案1',
									disabled: false
								},
								{
									value: '模拟答案2',
									disabled: false
								},
								{
									value: '模拟答案3',
									disabled: false
								}
							]
						},
						{
							id: 3,
							required: false,
							title: "模拟题目3",
							type: 2,
							options: [{
									value: '模拟答案1',
									disabled: false
								},
								{
									value: '模拟答案2',
									disabled: false
								},
								{
									value: '模拟答案3',
									disabled: false
								},
								{
									value: '模拟答案4',
									disabled: false
								}
							]
						},
						{
							id: 4,
							required: true,
							title: "模拟题目4",
							type: 2,
							options: [{
									value: '模拟答案1',
									disabled: false
								},
								{
									value: '模拟答案2',
									disabled: false
								},
								{
									value: '模拟答案3',
									disabled: false
								},
								{
									value: '模拟答案4',
									disabled: false
								},
								{
									value: '模拟答案5',
									disabled: false
								}
							]
						},
						{
							id: 5,
							required: false,
							title: "模拟题目5",
							type: 3,
							options: [{
								value: '',
								disabled: false
							}]
						},
						{
							id: 6,
							required: true,
							title: "模拟题目6",
							type: 3,
							options: [{
								value: '',
								disabled: false
							}]
						},
						{
							id: 7,
							required: false,
							title: "模拟题目7",
							type: 4,
							options: [{
								value: '',
								disabled: false
							}]
						},
						{
							id: 8,
							required: true,
							title: "模拟题目8",
							type: 4,
							options: [{
								value: '',
								disabled: false
							}]
						},
					]
				},
				// 页面图片
				imgurl: '',
			}
		},
		methods: {
			// 单选
			radioChange(item, itemG, indexG) {
				this.topicList.design.forEach((items, indexs) => {
					if (item.id == items.id) {
						items.options.forEach((itemx, indexx) => {
							if (itemx.value === itemG.value) {
								if (indexG === indexx) {

									itemx.disabled = true
									return
								}
							}
							itemx.disabled = false
						})
					}

				})

				// console.log(this.topicList);
			},
			// 问卷提交
			submit() {
				// 深拷贝
				const dataForm = JSON.parse(JSON.stringify(this.topicList));
				let showToast = true; // 是否显示提示信息
				dataForm.design.forEach(item => {
					if (item.required) {
						if (item.type === 1 || item.type === 2) {
							const allEnabled = item.options.every(option => !option.disabled);
							if (allEnabled) {
								showToast = false; // 不满足条件，不显示提示信息
								return; // 不满足条件，终止当前循环的执行
							}
						} else if (item.type === 3 || item.type === 4) {
							const isValue = item.options.every(option => option.value === '');
							if (isValue) {
								showToast = false; // 不满足条件，不显示提示信息
								return; // 不满足条件，终止当前循环的执行
							}
						}
					} else {
						// if (item.type === 1 || item.type === 2) {
						//     const allEnabled = item.options.every(option => !option.disabled);
						//     if (allEnabled) {
						//         showToast = false; // 不满足条件，不显示提示信息
						//         return; // 不满足条件，终止当前循环的执行
						//     }
						// }
					}
					const options = JSON.stringify(item.options);
					item.options = options;
				});

				if (showToast) {
					const extractedData = dataForm.design.map(item => {
						let {
							id,
							options,
							title,
							type
						} = item;
						return {
							id,
							options,
							title,
							type
						};
					});
					const data = {
						questionnaireId: dataForm.id,
						recyclingQuestions: JSON.stringify(extractedData)
					};
					uni.showToast({
						title: "问卷提交成功",
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: '请完成该问卷所有问题',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #E94E4C;
	}

	.img_bg {
		text-align: center;
		height: 500upx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.scroll-Y {
		width: 100%;
		height: 60.4vh;
		border-top-right-radius: 25px;
		border-top-left-radius: 25px;
		background-color: #fff;
		padding: 40upx 0;

		.form {
			margin: 0 40upx;

			.form_title {
				text-align: center;
				font-weight: bold;
				font-size: 40upx;
			}

			.form_content {
				margin: 10upx 0;
				text-indent: 2em;
			}

			.form_desgin {
				margin: 20upx 0;
			}

			.form_topic {
				padding: 10upx 20upx;
				font-size: 27upx;
				background-color: #F2F2F2;
				display: flex;
				// 文本超出隐藏
				// overflow: hidden;
				// text-overflow: ellipsis;
				// white-space: nowrap;
			}

			.form_module {
				margin: 20upx;

			}

			.form_submit {
				display: flex;
				justify-content: center;
				margin: 40upx;

				.submit {
					width: 50%;
					text-align: center;
					border: 1px solid #c0c4cc;
					padding: 20upx 0;
					border-radius: 50upx;
				}
			}
		}
	}
</style>